<template>
  <el-card>
    <el-table :data="skuList" border class="mb-20" v-loading="loading">
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片" align="center">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" class="sku__img" alt="图片" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作" width="280" align="center">
        <template v-slot="{ row }">
          <el-button
            v-if="row.isSale === 0"
            type="info"
            title="上架"
            size="small"
            :icon="Top"
            @click="onSale(row)"
          />
          <el-button
            v-else
            title="下架"
            type="success"
            size="small"
            :icon="Bottom"
            @click="cancelSale(row)"
          />
          <el-button
            type="primary"
            @click="editSku"
            size="small"
            title="修改"
            :icon="Edit"
          />
          <el-button
            type="info"
            size="small"
            title="查看详情"
            @click="showDetail(row)"
            :icon="InfoFilled"
          />
          <el-popconfirm
            :title="`你确定要删除${row.skuName}吗？`"
            @confirm="deleteSku(row)"
          >
            <template #reference>
              <el-button
                type="danger"
                title="删除"
                size="small"
                :icon="Delete"
              />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="pageSize"
      v-model:current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      layout="prev, pager, next, jumper, -> , sizes, total"
      :total="total"
      @size-change="getSkuList"
      @current-change="getSkuList"
    />
    <el-drawer v-model="drawer" :show-close="false">
      <el-descriptions :column="1">
        <el-descriptions-item label="名称：">
          {{ skuItem.skuName }}
        </el-descriptions-item>
        <el-descriptions-item label="描述：">
          {{ skuItem.skuDesc }}
        </el-descriptions-item>
        <el-descriptions-item label="价格：">
          {{ skuItem.price }}
        </el-descriptions-item>
        <el-descriptions-item label="平台属性：">
          <el-tag
            type="success"
            v-for="skuAttrValue in skuItem.skuAttrValueList"
            :key="skuAttrValue.id"
          >
            {{ `${skuAttrValue.attrName}-${skuAttrValue.valueName}` }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="销售属性：">
          <el-tag
            type="success"
            :key="skuSaleAttrValue.id"
            v-for="skuSaleAttrValue in skuItem.skuSaleAttrValueList"
          >
            {{
              `${skuSaleAttrValue.saleAttrName}-${skuSaleAttrValue.saleAttrValueName}`
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="产品图片：">
          <el-carousel trigger="click" height="400px" indicator-position="none">
            <el-carousel-item
              v-for="skuImage in skuItem.skuImageList"
              :key="skuImage.id"
            >
              <img
                class="sku__img--full"
                :src="skuImage.imgUrl"
                :alt="skuImage.imgName"
              />
            </el-carousel-item>
          </el-carousel>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XSku",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Delete, Edit, InfoFilled, Top, Bottom } from "@element-plus/icons-vue";
import {
  getSkuListApi,
  getSkuByIdApi,
  skuCancelSaleApi,
  skuOnSaleApi,
  deleteSkuApi,
} from "@/api/product/sku";
import type {
  SkuList,
  AddOrUpdateSkuParams,
} from "@/api/product/model/skuModel";
import { ElMessage } from "element-plus";
const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const skuList = ref<SkuList>([]);
const loading = ref(false);
const drawer = ref(false);
const skuItem = ref();
// 删除
const deleteSku = async (row: AddOrUpdateSkuParams) => {
  await deleteSkuApi(row.id as number);
  ElMessage.success("删除成功");
  getSkuList();
};
// 查看详情
const showDetail = async (row: AddOrUpdateSkuParams) => {
  skuItem.value = await getSkuByIdApi(row.id as number);
  drawer.value = true;
};
// 上架
const onSale = async (row: AddOrUpdateSkuParams) => {
  // 发送请求
  await skuOnSaleApi(row.id as number);
  // 提醒用户
  ElMessage.success("上架成功");
  // 修改数据
  getSkuList();
};
// 下架
const cancelSale = async (row: AddOrUpdateSkuParams) => {
  // 发送请求
  await skuCancelSaleApi(row.id as number);
  // 提醒用户
  ElMessage.success("下架成功");
  // 修改数据
  getSkuList();
};
// 修改sku
const editSku = () => {
  ElMessage.info("正在开发中...");
};
// 封装发送公共请求的函数
const getSkuList = async () => {
  loading.value = true;
  const res = await getSkuListApi(currentPage.value, pageSize.value);
  total.value = res.total;
  pageSize.value = res.size;
  skuList.value = res.records;
  currentPage.value = res.current;
  loading.value = false;
};
// 挂载发请求
onMounted(getSkuList);
</script>

<style scoped>
.sku__img--full {
  width: 100%;
  height: 100%;
}
.sku__img {
  width: 100px;
  height: 100px;
}
</style>
